<template>
    <div>
        <button @click=increment>count is: {{ count }}</button>
    </div>
    <div>
        <button @click="state.count++">
   {{ state.count }}
        
</button>
</div>


</template>

<script setup>
import { ref,nextTick,reactive } from 'vue'
// 声明响应式状态(ref用来创建基本类型（number,String,boolean）或引用类型的包装)，需通过.value进行访问
//reactive用于创建一个代理对象(返回的是一个原始对象的Proxy)
const count=ref(0)
const state =reactive({count:0})

// reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：
const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false


// 理响应式状态和 DOM 更新的核心概念
async function increment() {
  count.value++
  console.log(document.querySelector('button').textContent) 
  await nextTick()
  // 现在 DOM 已经更新了
   console.log(document.querySelector('button').textContent)
}

</script>

<style lang="scss" scoped>

</style>